<template>
  <card-container @refresh="refresh" :title="title">
    <ve-histogram width="100%" height="100%" :extend="chartExtend" :data="statisticsData"
                  :settings="chartSettings"></ve-histogram>
  </card-container>
</template>

<script>
import {statisticsPageMixins} from "@/views/checkStatisticsPage/mixins/statisticsPageMixins";
import {queryQuestionList} from "@/api/checkPage/statistics";
import {isArr} from "@/utils/arrayUtil";

export default {
  mixins: [statisticsPageMixins],
  data() {
    const colorConfig = ['rgba(55, 81, 255, 1)', 'rgba(147, 255, 190, 1)', 'rgba(106, 235, 232, 1)',]
    return {
      title: '整改情况统计',
      queryFun: queryQuestionList,
      statisticsData: {columns: [], rows: []},
      chartSettings: {
        // showLine: ['整改完成'],
        // stack: { '总数': ['整改中', '未整改'] }
      },
      chartExtend: {
        series(ser) {
          return isArr(ser) ? ser.map((item, index) => {
            item.itemStyle = {color: colorConfig[index % 3]}
            return item
          }) : ser
        },
        grid: {
          top: 25,
          bottom: 0
        },
        xAxis: {
          axisLabel: {
            interval: 0,
            rotate: 40
          }
        },
        legend: {
          show: true
        }
      },
    }
  },
  methods: {
    changeRowData(baseData) {
      let columns = ['区域', '整改完成', '待确认', '整改中', '未整改']
      let rows = baseData.map(item => {
        let {xaxisLabel, values: {weizhenggai, zhegngaiwancheng, daiqueren, zhenggaizhong,}} = item;
        return {
          '区域': xaxisLabel,
          '整改完成': zhegngaiwancheng,
          '待确认': daiqueren,
          '整改中': zhenggaizhong,
          '未整改': weizhenggai,
        }
      })
      return {columns, rows}
    }
  }
}
</script>

<style scoped>

</style>

